<template>
	<view class="content">
		<view v-if="isUser && selectUser.patientName" class="home-user" @click="goDetail">
			<view style="display: flex;flex-direction: column;justify-content: space-between;">
				<view v-if="selectUser.patientName" class="flex-row">
					<view><u--text mode="name" :text="selectUser.patientName" format="encrypt"></u--text></view>
					<view style="width: 178rpx;margin-left: 31rpx;">
						<view class="user-but" @click.stop="show = true">更换就诊卡</view>
					</view>
				</view>
				<view class="user-card">
					<view>就诊卡号</view>
					<view v-if="selectUser.patientName" style="color: #000000;margin-top: 8rpx;">
						{{selectUser.patientCard.substr(0, 1) + '****************'+selectUser.patientCard.substr(-1, 1)}}
					</view>
				</view>
			</view>
			<view class="user-img" @click.stop="goQrcode">
				<!-- <image src="../../static/img/qrcode.png" style="width: 148rpx;height: 148rpx;"></image> -->
				<canvas canvas-id="qrcode" style="width: 70px;height: 70px;"></canvas>
				<view style="margin-top: 8rpx;">点击可放大</view>
			</view>
		</view>
		<view v-else class="home-add">
			<image src="../../static/img/add_healthCard.png" style="width: 250rpx;height: 85rpx;"
				@click="goPage('/pages/bookbuilding/bookbuilding')"></image>
		</view>
		<view class="home-tab">
			<image src="../../static/img/pay.png" @click="goPage('/pages/nonpayment/nonpayment')"
				style="width: 333rpx; height: 158rpx;"></image>
			<image src="../../static/img/registered.png" @click="goPage('/pages/bookdesc/bookdesc')"
				style="width: 333rpx; height: 158rpx;"></image>
		</view>
		<view class="home-con">
			<view class="con-title">门诊服务</view>
			<view class="con-list">
				<view class="con-item" @click="goPage('/pages/bookbuilding/bookbuilding')">
					<image src="../../static/img/healthCard.png" class="con-img"></image>
					<view class="item-title">自助建档绑卡</view>
				</view>
				<view class="con-item" @click="goPage('/pages/userlist/userlist')">
					<image src="../../static/img/userManagement.png" class="con-img"></image>
					<view class="item-title">就诊人管理</view>
				</view>
				<view class="con-item" @click="goPage('/pages/recharge/recharge')">
					<image src="../../static/img/recharge.png" class="con-img"></image>
					<view class="item-title">门诊充值</view>
				</view>
				<view class="con-item" @click="goPage('/pages/logrefund/logrefund')">
					<image src="../../static/img/refund.png" class="con-img"></image>
					<view class="item-title">门诊退款</view>
				</view>
				<!-- <view class="con-item" @click="goPage('/pages/logrefundold/logrefundold')">
					<image src="../../static/img/refundold.png" class="con-img">
					</image>
					<view class="item-title">历史退款</view>
				</view> -->
				<view class="con-item" @click="goPage('/pages/appointlist/appointlist')">
					<image src="../../static/img/myRegistration.png" class="con-img"></image>
					<view class="item-title">挂号列表</view>
				</view>
				<view class="con-item" @click="goPage('/pages/logconsume/logconsume')">
					<image src="../../static/img/expensesRecord.png" class="con-img"></image>
					<view class="item-title">消费清单查询</view>
				</view>
				<view class="con-item" @click="goPage('/pages/logpayment/logpayment')">
					<image src="../../static/img/rechargeRecord.png" class="con-img"></image>
					<view class="item-title">充值清单查询</view>
				</view>
				<view class="con-item" @click="goPage('/pages/logjianyan/logjianyan')">
					<image src="../../static/img/inspectionReport_outpatientClinic.png" class="con-img"></image>
					<view class="item-title">检验报告查询</view>
				</view>
				<view class="con-item" @click="goPage('/pages/logjiancha/logjiancha')">
					<image src="../../static/img/inspectionReport_outpatientClinic 2.png" class="con-img"></image>
					<view class="item-title">检查报告查询</view>
				</view>
				<view class="con-item" @click="goPage('/pages/logfp/logfp')">
					<image src="../../static/img/bill.png" class="con-img"></image>
					<view class="item-title">电子发票</view>
				</view>
			</view>
		</view>
		<view class="home-con">
			<view class="con-title">住院服务</view>
			<view class="con-list">
				<view class="con-item" @click="goPage('/pages/bookrecordList/bookrecordList')">
					<image src="../../static/img/fileManagement.png" class="con-img"></image>
					<view class="item-title">住院档案管理</view>
				</view>
				<view class="con-item" @click="goPage('/pages/bookrecordLog/bookrecordLog')">
					<image src="../../static/img/inspectionReport_hospitalized.png" class="con-img"></image>
					<view class="item-title">日清单查询</view>
				</view>
			</view>
		</view>
		<view class="home-con">
			<view class="con-title">调查问卷</view>
			<view class="con-list">
				<view class="con-item" @click="goPath('/pages/questionnaireA/questionnaireA')">
					<image src="../../static/img/outpatientClinic.png" class="con-img"></image>
					<view class="item-title">门诊服务调查</view>
				</view>
				<view class="con-item" @click="goPath('/pages/questionnaireB/questionnaireB')">
					<image src="../../static/img/hospitalized.png" class="con-img"></image>
					<view class="item-title">住院服务调查</view>
				</view>
			</view>
		</view>
		<!-- <view class="home-con">
			<view class="con-title">医保服务</view>
			<view class="con-list">
				<view class="con-item">
					<image src="../../static/img/medicalInsurance.png" class="con-img"></image>
					<view class="item-title">河南医保</view>
				</view>
				<view class="con-item">
					<image src="../../static/img/balance.png" class="con-img"></image>
					<view class="item-title">医保余额</view>
				</view>
				<view class="con-item">
					<image src="../../static/img/state.png" class="con-img"></image>
					<view class="item-title">参保状态</view>
				</view>
				<view class="con-item">
					<image src="../../static/img/details.png" class="con-img"></image>
					<view class="item-title">缴存明细</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="home-con">
			<view class="con-title">医院信息</view>
			<view class="con-list">
				<view class="con-item" @click="goPage('/pages/hospitaldesc/hospitaldesc')">
					<image src="../../static/img/hospitalIntroduction.png" class="con-img"></image>
					<view class="item-title">医院简介</view>
				</view>
				<view class="con-item" @click="goPage('/pages/hospitaldepartment/hospitaldepartment')">
					<image src="../../static/img/departmentIntroduction.png" class="con-img"></image>
					<view class="item-title">科室介绍</view>
				</view>
				<view class="con-item" @click="goPage('/pages/hospitaldoctor/hospitaldoctor')">
					<image src="../../static/img/expertIntroduction.png" class="con-img"></image>
					<view class="item-title">专家介绍</view>
				</view>
			</view>
		</view> -->
		<u-popup :show="show" mode="bottom" :round="10" @close="show = false">
			<view class="pop-con">
				<view class="pop-title">选择就诊人</view>
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="user-list" v-for="(item,index) in userList" :key="index">
						<u-avatar :src="src" size="55"></u-avatar>
						<view class="list-text">
							<view style="font-weight: 500;color: #000000;font-size: 31rpx;">
								<u--text mode="name" :text="item.patientName" format="encrypt"></u--text>
							</view>
							<view>
								就诊卡号：{{item.patientCard.substr(0, 1) + '****************'+item.patientCard.substr(-1, 1)}}
							</view>
							<view>证件类型：身份证</view>
						</view>
						<view style="margin-left: auto;width: 128rpx;">
							<u-button type="primary" :plain="true" shape="circle" text="确定"
								@click="changeUser(item)"></u-button>

						</view>
					</view>
				</scroll-view>
				<view class="book-but">
					<u-button type="primary" text="添加就诊人"
						@click="goPage('/pages/bookbuilding/bookbuilding')"></u-button>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		loginApi,
		userlistApi
	} from "@/api/user"
	import UQRCode from 'uqrcodejs';
	export default {
		data() {
			return {
				isUser: false,
				show: false,
				src: '',
				isWechat: true,
				local: '',
				userList: [],
				selectUser: {},
			}
		},
		onLoad() {
			// this.checkWechat()


		},
		onShow() {
			this.selectUser = uni.getStorageSync('selectUser') || {}
			if (!uni.getStorageSync('token')) {
				this.checkWeChatCode()
			}
			if (uni.getStorageSync('token')) {
				this.getUser()
			}
		},
		methods: {
			makeQrcode(id) {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = id;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 70;
				// 调用制作二维码方法

				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			async getUser() {
				let userInfo = uni.getStorageSync('userInfo')
				const res = await userlistApi({
					userId: userInfo.id,
					pageNum: 1,
					pageSize: 100,
					patientType: 1
				})
				this.userList = res.rows
				this.isUser = this.userList.length
				if (this.userList.length) {
					if (uni.getStorageSync('selectUser')) {
						this.selectUser = uni.getStorageSync('selectUser')
						this.$nextTick(() => {
							this.makeQrcode(this.selectUser.patientId)
						})

					} else {
						this.selectUser = this.userList[0]
						this.$nextTick(() => {
							this.makeQrcode(this.selectUser.patientId)
						})
						uni.setStorageSync('selectUser', this.userList[0])
					}

				}


			},
			changeUser(item) {
				this.selectUser = item
				this.$nextTick(() => {
					this.makeQrcode(this.selectUser.patientId)
				})
				uni.setStorageSync('selectUser', item)
				this.show = false
			},
			checkWechat() {
				const ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {
					this.isWechat = true;
				} else {
					this.isWechat = false;
					uni.showToast({
						title: '请使用微信网页浏览器打开',
						icon: 'none'
					})
				}
			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
					[, ''
					])[1]
					.replace(/\+/g, '%20')) || null
			},
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				if (code) {
					console.log(code);
					this.getOpenidAndUserinfo(code)
				} else {
					this.getCode()
				}
			},
			getCode() {
				console.log(window.location.href);
				this.local = window.location.href
				let local = encodeURIComponent(window.location.href);
				// wx2a9760e7a2f935d3
				// wxca0c462b619d3b6b
				let appid = 'wxca0c462b619d3b6b'
				window.location.href =
					"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
					appid +
					"&redirect_uri=" +
					local +
					"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";

			},
			async getOpenidAndUserinfo(code) {
				const res = await loginApi({
					code
				})
				console.log(res);
				uni.setStorageSync('token', res.data.token)
				uni.setStorageSync('userInfo', res.data.userInfo)
				this.getUser()
				// window.location.href = this.local
			},
			goQrcode() {
				uni.navigateTo({
					url: `/pages/qrcode/qrcode?patientId=${this.selectUser.patientId}`
				})
			},
			goDetail() {
				uni.navigateTo({
					url: `/pages/userinfo/userinfo?id=${this.selectUser.id}`
				})
			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goPage(url) {
				if (!this.selectUser.id) {
					uni.navigateTo({
						url: '/pages/bookbuilding/bookbuilding'
					})
				} else {
					this.show = false
					uni.navigateTo({
						url
					})
				}


			},
		}
	}
</script>

<style>
	uni-page-wrapper {
		background: red !important;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		/* min-height: 100vh; */
		background-color: #F8F8F8;
		box-sizing: border-box;
		padding: 23rpx 0;
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}



	.home-user {
		width: 688rpx;
		height: 281rpx;
		background-image: url('../../static/img/bg_healthCard.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		/* align-items: center; */
		padding: 31rpx;
		box-sizing: border-box;
	}

	.home-add {
		width: 688rpx;
		height: 281rpx;
		background-image: url('../../static/img/bg_healthCard.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-row {
		display: flex;
		align-items: center;
		font-weight: 500;
		color: #000000;
		font-size: 35rpx;
	}

	.user-but {
		width: 148rpx;
		height: 48rpx;
		background: #05A2FF;
		border-radius: 25rpx;
		color: #FFFFFF;
		font-size: 23rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user-card {
		color: #999999;
		font-size: 27rpx;
	}

	.user-img {
		margin-left: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 179rpx;
		background: #FFFFFF;
		border-radius: 10px;
		color: #999999;
		font-size: 23rpx;
	}

	.home-tab {
		margin-top: 23rpx;
		width: 688rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.home-con {
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		margin-top: 23rpx;
		padding: 31rpx;
		color: #000000;
		font-size: 23rpx;
		box-sizing: border-box;
	}

	.con-title {
		font-size: 27rpx;
		font-weight: 500;
		/* margin-left: 31rpx; */
	}

	.con-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.con-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 31rpx;
	}

	.con-img {
		width: 69rpx;
		height: 69rpx;
	}

	.item-title {
		margin-top: 8rpx;
	}

	.pop-con {
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pop-title {
		width: 100%;
		text-align: center;
		font-weight: 500;
		color: #000000;
		font-size: 31rpx;
	}

	.scroll-y {
		height: 400rpx;
		width: 688rpx;
		margin-top: 31rpx;
		box-sizing: border-box;
	}

	.user-list {
		width: 688rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		padding-left: 19rpx;
		padding-right: 29rpx;
		padding-top: 23rpx;
		padding-bottom: 44rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 23rpx;
		box-shadow: 0px 0 13rpx 0px rgba(5, 162, 255, 0.11);
		color: #999999;
		font-size: 23rpx;
	}

	.list-text {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.book-but {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 31rpx;
	}
</style>